<template>
	<view>
		<view class="dlWrap">
			<view class="dlInput_psd">
				<view class="dlInput_numb">
					<text>手机号</text>
					<input type="type" v-model="mobile" placeholder-style="color:#CCCCCC" placeholder-class="placecLass" @input="focusClass1"
					 :class="[isActive1 ? 'blueBorder' : '']" />
				</view>
				<!-- <view><uni-icon type="arrowdown" size="20" color="#A7A7A7"></uni-icon></view> -->
			</view>
			<!-- 验证码登录-->
			<view class="yzmLog">
				<view>
					<input type="text" maxlength="4"  v-model="authcode" placeholder="请输入短信验证码" placeholder-style="color:#CCCCCC" placeholder-class="placecLass"
					 @input="focusClass2" :class="[isActive2 ? 'blueBorder' : '']" />
					<view class="getYzm" @tap="sendCode"><text>{{countdown}}</text><text v-if="timeStatus">s</text></view>
				</view>
			</view>
			<view class="dlInput_psd">
				<view class="dlInput_numb">
					<text>新密码</text>
					<input type="password" v-model="newpassword" placeholder-style="color:#CCCCCC" placeholder-class="placecLass"
					 @input="focusClass7" :class="[isActive7 ? 'blueBorder' : '']" placeholder="密码不能低于6位字符"/>
				</view>
				<!-- <view><uni-icon type="arrowdown" size="20" color="#A7A7A7"></uni-icon></view> -->
			</view>
			<view class="dlInput_psd">
				<view class="dlInput_numb">
					<text>确认密码</text>
					<input type="password" v-model="confirmpassword" placeholder-style="color:#CCCCCC" placeholder-class="placecLass"
					 @input="focusClass8" :class="[isActive8 ? 'blueBorder' : '']" />
				</view>
				<!-- <view><uni-icon type="arrowdown" size="20" color="#A7A7A7"></uni-icon></view> -->
			</view>

			<view class="goIndex" @tap="goMod">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navConfig: {
					isFixed: false,
					left: {
						text: '',
						isShowLeft: true,
						leftGobackColor: 'black',
						leftTextColor: 'black',
					},
					mid: {
						isShowMid: true,
						text: '忘记密码'
					},
					right: {
						text: '',
						isShowRight: false,
					}
				},
				mobile: '',
				authcode: '',
				newpassword: '',
				confirmpassword: '',
				isActive1: true,
				isActive2: false,

				isActive7: false,
				isActive8: false,
				
				countdown: '获取验证码',
				timeStatus: false, //s秒
				disabled: false //重新获取按钮是否开启
			}
		},
		methods: {
			focusClass1(e) {
				if (e.detail.value.length !== 0) {
					this.isActive1 = true
				} else {
					this.isActive1 = false;
				}
			},
			focusClass2(e) {
				if (e.detail.value.length !== 0) {
					this.isActive2 = true
				} else {
					this.isActive2 = false
				}
			},
			focusClass7(e) {
				if (e.detail.value.length !== 0) {
					this.isActive7 = true
				} else {
					this.isActive7 = false
				}
			},
			focusClass8(e) {
				if (e.detail.value.length !== 0) {
					this.isActive8 = true
				} else {
					this.isActive8 = false
				}
			},
			//发送验证码
			sendCode() {
				if(this.timeStatus){
					return false;
				}
				if (!this.$common.isPhoneNumber(this.mobile)) {
					this.$common.errorToShow('请输入正确的手机号')
					return false;
				}
				
				const that = this
				that.$request('S1028', {
						'PHONENO': that.mobile
					},
					'POST',
					function(res) {
						if (res.data.CODE == 0) {
							that.$common.successToShow("发送成功")
							that.TimeBtn();
						}
					})
			},
			nextStep() {
				this.isShowStep = 'psd';
				this.$emit('sendShowYzm', this.isShowStep)
			},
			goMod() {
				const that = this
				
				if (!that.$common.isPhoneNumber(that.mobile)) {
					that.$common.errorToShow('请输入正确的手机号')
					return false;
				}
				if(that.authcode == ''){
					this.$common.errorToShow('短信验证码不能为空')
					return false;
				}
				if(that.newpassword == ''){
					this.$common.errorToShow('新密码不能为空')
					return false;
				}
				if(that.newpassword.length<6){
					this.$common.errorToShow('密码不能低于6位字符')
					return false;
				}
				if(that.newpassword != that.confirmpassword){
					this.$common.errorToShow('两次输入密码不一至')
					return false;
				}
				that.$request('S1026', {
						'LOGIN_ID': that.mobile,
						'LOGIN_PWD':that.$md5(that.$common.sys.key+that.newpassword).toUpperCase(),
						'VERCODE':that.authcode
					},
					'POST',
					function(res) {
						if (res.data.CODE == 0) {
							that.$common.successToShow("密码修改成功",function(){
								uni.reLaunch({
									url: '../registerLogin/registerLogin'
								});
							})
							
						}else{
							that.$common.errorToShow(res.data.MSG);
						}
					})
			},
			TimeBtn() {
				this.countdown = 60;

				this.timeStatus = true;
				let timer = setInterval(() => {
					--this.countdown
				}, 1000)
				setTimeout(() => {
					clearInterval(timer);
					this.timeStatus = false;
					this.countdown = '重新获取';
				}, 60000);
				if (this.countdown == '重新获取') {
					this.disabled = false
				} else {
					this.disabled = true
				}
				console.log(typeof(this.countdown));
			},
		}
	}
</script>

<style>
	.dlWrap {
		margin: 0upx 56upx 0 56upx;
		padding-top: 184upx;
	}

	.dlInput_psd {
		margin-top: 76upx;
		padding-bottom: 20upx;
		height: 46upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1upx solid #DCDCDC;
		justify-content: space-between;
	}

	.dlInput_psd text {
		color: #333333;
		font-size: 28upx;
	}

	.dlInput_psd input {
		margin-left: 70upx;
		height: 46upx;
		line-height: 46upx;
		color: #333;
		font-size: 28upx;
	}

	.dlInput_numb {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	/* .blueBorder{
		border-bottom: 1upx solid #55A0FF!important;
	} */
	.goIndex {
		height: 88upx;
		line-height: 88upx;
		border-radius: 88upx;
		font-size: 28upx;
		background: linear-gradient(left, #54AAFF, #568FFF);
		text-align: center;
		color: #ffffff;
		margin-top: 110upx;
	}


	.getYzm {
		width: 190upx;
		height: 63upx;
		line-height: 63upx;
		background: #559DFF;
		border-radius: 10upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
	}

	.yzmLog {
		margin-top: 76upx;
		height: 46upx;
	}

	.yzmLog>view {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.yzmLog input {
		height: 46upx;
		line-height: 46upx;
		color: #333;
		width: 428upx;
		font-size: 28upx;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #DCDCDC;
	}
</style>
